Regroup v2振り返り

現状のRegroupのコードを捨てて作り直すことを想定して、作り直す前に振り返りが必要

K: 良かったところ

P: 問題、ダメだった点

T: ネクストアクション

P: 最初からテストを書かなかった

GUIでテスト書きにくい、Canvasを使うのでDOMのエミュレーションが効かない、とテストやりにくいプロジェクトではあったが、テストがないことによってある程度の規模から壊れやすくなった

P: Paper.jsをrequireしてしまった

TypeScriptを初めて本格的に使ったためモジュールシステムに対する理解が足りていなかった、このやり方はpaperがanyになってた

作り直すなら最初から「anyをごく局所的なもの以外許さない」スタイルでやる

P: paper.jsのToolEventを使ってしまった

これはマウスイベントの扱いが「ツール」という大域的な状態によってキレイに切り替わることを前提としたフレームワークになっている

現実的にはそうではない

特にiPadでのマルチタッチジェスチャを別途独立したイベントハンドラで扱うことになり面倒な問題の種になった

例えばペンでの手書きをしている最中にうっかり手が画面に触れた場合、マルチタッチが発生するわけだが、どう対処するか？などの難しさが生まれた

Undoの設計

かなり初期から「Undoがあるべき」と考えていた

そのためReactの状態更新のフックでUndo/Redoを管理する設計にした

付箋を1枚動かせば、状態更新がされ、Undoリストが伸びる

これがダメだった

付箋を複数枚まとめて移動する機能が増えた時、付箋を1枚動かす関数を再利用したのではUndoが1枚1枚になってしまう

複数枚移動はまとめて一回で状態更新する縛りが発生

付箋とパスができたときにそれらを選択して移動したら…複雑化！

明示的にスナップシャットを取る形に後から変更しようとしたが壊れまくり

Undoが壊れて、しばらくその状態で使ったが、Undoが必要なケースはあんまりない

ペンで書き損じたので戻したい

複数枚移動で変なところに下ろしてしまったから戻したい

1枚の付箋の移動をミスったら普通はさらに移動するだけ

1枚付箋のUndoは「顧客の求めていない機能」だった

ネットワーク同期について

Firestoreでカジュアルに同期

同じURLを見ていれば編集できる

一人で使ってる分にはPCでもスマホでもタブレットでもいじれる便利な仕組み

HandoffやAirDropで共有できる

しかし基本的にサーバに到着した情報で上書きしてるので複数人が同時に編集すると簡単に壊れる

そもそもユーザは編集したくない場合がある

「うっかり壊すのが怖い」

デフォルトで編集しないモードで「編集リクエスト」して、今編集権ある人が渡せば常に編集者は1名で良いのでは

単なる閲覧者も束ねた付箋を開いたり閉じたりすることを想定していた

そもそもRegroupのマップは基本的に他人に見せるものじゃない？

これは「思考の整理過程」のものはそのままでは他人に見せるのに適当な形ではなく、もう一手間掛けなければならない、ということ？

その「清書」プロセスをRegroupの上でできるべきかどうかは不明

「清書してから見せよう」なんてどうせやらない説もある

更新のたびにキャンバスを消して描き直してる

変更されたものだけ更新したら速くなるのか？これは検証した方が良い

iPadでは画像に変換してズームしてる、PCではホイールイベントでズームを変更している

ホイールイベントがスワイプと違って「終了イベント」を持たないせい

これが割と描画遅延の影響になる

ペンは必要か？

うーん、必須とまではいかないけど、付箋の配置だけでは表現しにくいことを気軽に追加できるのはメリット

ペン入力を大前提として全面Canvasにしたのは正解か？

これは若干あやしい

普通の手書きノートアプリとして使うと…

さすがにブラウザアプリなので挙動が重たくなる

明示してないけどFirestoreの方でドキュメント容量の制限に引っかかる

付箋をDOMにして、手書きの線だけグループごとにCanvasかSVGにするのでも良いのでは

この方法のメリット:

ブラウザの標準の検索で付箋が見つけられるかも

「Canvasのせいでテスト困難」の問題が減る

差分更新をReactに任せられる？

投げ縄選択などのために、全面キャンバスは必要